<template>
    <div class="header1">
       <div class="content-wrapper">
           <div class="avatar">
               <img :src="seller.avatar" height="64" width="64">
           </div>
           <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">{{seller.name}}</span>
                </div>
                <div class="description">
                    <span>{{seller.description}} / {{seller.deliveryTime}}</span>
                </div>
                <div v-if="seller.supports" class="supports">

                   <span class="icon" :class="classMap[seller.supports[0].type]">

                   </span>
                   <span class="text">
                   {{seller.supports[0].description}}
                   </span>
               </div>
                <div>
                   <span>

                   </span>
               </div>
           </div>
           <div v-if="seller.supports" class="supports-count">
                <span class="count">{{seller.supports.length}}}</span>
               <i class="icon-keyboard_arrow_right"></i>
           </div>
       </div>
        <div class="bulletin-wrapper">

        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'header1',
        data() {
            return {
            }
        },
       // created(){
       // response = response.data
       // if (response.status === 'success'){
       // this.$http.get('/api/index/Index/getShopInfo').then((response) => {

       //      }
       //  })
       // }
        props: {
           seller: {
                type: Object
          },
           classMap: {
               type: Array
           }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../Common/stylus/mixin.styl";
    @import "../../Common/stylus/icon.styl";
    .content-wrapper{
        position: relative;
    }
    .avatar{
        display: inline-block;
        vertical-align: top;
    }
    .avatar img{
        border-radius: 2px;
    }
    .content-wrapper{
        display: inline-block;
        padding: 24px 12px 18px 24px;
        font-size: 0;
    }
    .content{
        display: inline-block;
        text-align: left;
        font-size: 14px;
        margin-left: 16px;
    }
    .content .title{
         margin:  2px 0 8px 0;
     }
    .content .brand{
       display: inline-block;
       width: 30px;
       height: 18px;
       bg-image('../../../static/img/brand');
       background-size: 30px 18px;
       background-repeat: no-repeat ;
       vertical-align: top;
    }
    .content .name{
        margin-left: 6px;
        font-size: 16px;
        line-height: 18px;
        font-weight: bold;
    }
    .content .description{

    }
    .supports{
        /*border: 1px red solid;*/
        margin: 9px 0;
    }
    .supports .icon{
        display:inline-block ;
        width: 12px;
        height: 12px;
        margin-right: 4px;
        background-size: 12px 12px;
        background-repeat: no-repeat;

    }
    .supports .decrease{
    bg-image('../../../static/img/decrease_1');
    }
    .supports .discount{
    bg-image('../../../static/img/discount_1');
    }
    .supports .guarantee{
    bg-image('../../../static/img/guarantee_1');
    }
    .supports .invoice{
    bg-image('../../../static/img/invoice_1');
    }
    .supports .special{
    bg-image('../../../static/img/special_1');
    }
    .supports .text{
        line-height: 12px;
        font-size: 10px;
    }
    .supports-count{
        position: absolute;
        right: 12px;
        bottom: 12px;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        border-radius: 14px;
        background: rgba(0,0,0,0.2);
        text-align: center;
    }
    .supports-count{
        border: 1px red solid;
        font-size: 10px;
    }
    .icon-keyboard_arrow_right{
        font-size:10px ;
    }
</style>
